<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="$t('info')"
      width="80%"
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :disabled="operation === 0"
      >
        <el-descriptions
          class="margin-top"
          :title="$t('BasicInformation')"
          :column="3"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.skuCode") }}
            </template>
            {{ detailDataForm.skuCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.goodsName") }}
            </template>
            {{ detailDataForm.goodsName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.goodsEnDesc") }}
            </template>
            {{ detailDataForm.goodsEnDesc }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.customCode") }}
            </template>
            {{ detailDataForm.customCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.declaredName") }}
            </template>
            {{ detailDataForm.declaredName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.declaredEnName") }}
            </template>
            {{ detailDataForm.declaredEnName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.skuStatus") }}
            </template>
            <el-tag :type="skuStatusTag[detailDataForm.skuStatus]">
              {{
                $t(
                  "statusLang." +
                    getTitleByValue(
                      productStatusOptions,
                      detailDataForm.skuStatus
                    )
                )
              }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.declaredUsdPrice") + "(USD)" }}
            </template>
            {{ detailDataForm.declaredUsdPrice }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("categoryLang.hsCode") }}
            </template>
            {{ detailDataForm.hsCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.predictionGoodsWeight") + "(KG)" }}
            </template>
            {{ detailDataForm.predictionSkuWeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.depotGoodsWeight") }}
            </template>
            {{ detailDataForm.depotSkuWeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.goodsUrl") }}
            </template>
            <el-link
              :href="`${detailDataForm.goodsUrl}`"
              target="_blank"
              type="primary"
            >
              {{ detailDataForm.goodsUrl }}</el-link>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{
                this.$t("goodsSKULang.predictionLength") +
                  "*" +
                  this.$t("goodsSKULang.width") +
                  "*" +
                  this.$t("goodsSKULang.height") +
                  "(CM)"
              }}
            </template>
            {{ detailDataForm.predictionLength }}*{{
              detailDataForm.predictionWeight
            }}*{{ detailDataForm.predictionHeight }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{
                this.$t("goodsSKULang.depotLength") +
                  "*" +
                  this.$t("goodsSKULang.width") +
                  "*" +
                  this.$t("goodsSKULang.height") +
                  "(CM)"
              }}
            </template>
            {{ detailDataForm.depotLength }}*{{ detailDataForm.depotWeight }}*{{
              detailDataForm.depotHeight
            }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.category") }}
            </template>
            {{ detailDataForm.firstCategoryName }} /
            {{ detailDataForm.secondCategoryName }} /
            {{ detailDataForm.thirdCategoryName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <h3>其他信息</h3>
      <div>
        <el-tabs type="border-card">
          <!-- 库存 -->
          <el-tab-pane :label="$t('goodsSKULang.inventory')">
            <el-table :data="inventoryData" border class="mt-10">
              <el-table-column
                :label="$t('depotLang.depot')"
                prop="depotCodeAndName"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('statusLang.inTransit')"
                prop="inTransitNum"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('statusLang.pending')"
                prop="waitShelvingNum"
                align="center"
              />
              <el-table-column
                :label="$t('statusLang.availableForSale')"
                prop="canUseNum"
                align="center"
              />
              <el-table-column
                :label="$t('statusLang.packaged')"
                prop="packagedNum"
                align="center"
              />
              <el-table-column
                :label="$t('regionLang.badProduct')"
                prop="defectiveProductNum"
                align="center"
              />
              <el-table-column
                :label="$t('createDate')"
                prop="createTime"
                align="center"
              />
              <el-table-column
                :label="$t('gmtModified')"
                prop="modifiedTime"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 批次库存 -->
          <el-tab-pane :label="$t('goodsSKULang.batchInventory')">
            <el-table :data="batchInventoryData" border class="mt-10">
              <el-table-column
                :label="$t('depotLang.depot')"
                prop="depotCodeAndName"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.storageLocation')"
                prop="locationCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.boxNumber')"
                prop="boxNo"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.receiptNum')"
                prop="orderNo"
                align="center"
              />
              <el-table-column
                :label="$t('statusLang.status')"
                prop="orderStatus"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    $t(
                      "statusLang." +
                        getTitleByValue(
                          deliveryStatusOptions,
                          scope.row.orderStatus
                        )
                    )
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelvingNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.shelfDate')"
                prop="gmtShelvingDate"
                align="center"
              />
              <el-table-column
                :label="$t('gmtModified')"
                prop="gmtModifiedDate"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 出库订单 -->
          <el-tab-pane :label="$t('goodsSKULang.outboundOrder')">
            <el-table :data="outboundOrderData" border class="mt-10">
              <el-table-column
                :label="$t('goodsSKULang.orderNumber')"
                prop="orderNo"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('number')"
                prop="outboundStock"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('depotLang.depot')"
                prop="depotCodeAndName"
                align="center"
              />
              <el-table-column
                :label="$t('statusLang.status')"
                prop="orderStatus"
                align="center"
              >
                <template v-slot="{ row }">
                  {{
                    $t(
                      "statusLang." +
                        getTitleByValue(orderStatusOptions, row.orderStatus)
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('createDate')"
                prop="gmtCreatedDate"
                align="center"
              />
              <el-table-column
                :label="$t('gmtModified')"
                prop="gmtModifiedDate"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 入库订单 -->
          <el-tab-pane :label="$t('goodsSKULang.receiptdOrder')">
            <el-table :data="receiptdOrderOrder" border class="mt-10">
              <el-table-column
                :label="$t('goodsSKULang.orderNumber')"
                prop="orderNo"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('statusLang.status')"
                prop="status"
                align="center"
                width="100"
              >
                <template v-slot="{ row }">
                  {{
                    $t(
                      "statusLang." +
                        getTitleByValue(deliveryStatusOptions, row.orderStatus)
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('depotLang.depot')"
                prop="depotCodeAndName"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.forecastQuantity')"
                prop="preSkuNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.receivingQuantity')"
                prop="receiptSkuNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelvingSkuNum"
                align="center"
              />
              <el-table-column
                :label="$t('createDate')"
                prop="createdTime"
                align="center"
              />
              <el-table-column
                :label="$t('gmtModified')"
                prop="modifiedTime"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('goodsSKULang.productImage')">
            <!-- TODO -->
            <img :src="`${picUrl}`" alt="">
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSkuInfo,
  getOrderInfo,
  getOutboundOrderList,
  getSkuStockInfoList,
  getSkuStockBatchList,
  getPictureList
} from '@/api/business/productManage/product'
import {
  productStatusDict,
  deliveryStatusDict,
  orderStatusDict
} from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
export default {
  name: 'InfoForm',
  props: {
    value: {
      type: Number,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看
    }
  },
  data() {
    return {
      picUrl: '', // 产品图片
      detailDataForm: {},
      inventoryData: [],
      batchInventoryData: [],
      outboundOrderData: [],
      receiptdOrderOrder: [],
      getTitleByValue: getTitleByValue,
      skuStatusTag: ['success', 'warning'],
      productStatusOptions: getDictOptionList(productStatusDict), // 产品状态
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict),
      orderStatusOptions: getDictOptionList(orderStatusDict)
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
          this.getSkuStockInfoList()
          this.getSkuStockBatchList()
          this.getOutboundOrderList()
          this.getOrderInfo()
          this.getPictureList()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 基本信息
    async getData() {
      if (!this.value) return
      const res = await getSkuInfo({
        skuId: this.value
      })
      if (!res || res.data === null) return
      this.detailDataForm = res.data
      // console.log(res.data, "回显");
    },
    // 详情 库存
    async getSkuStockInfoList() {
      const { data } = await getSkuStockInfoList({
        skuId: this.value
      })
      // console.log(data, "库存详情");
      this.inventoryData = data
    },
    // 详情 批次库存
    async getSkuStockBatchList() {
      const { data } = await getSkuStockBatchList({
        skuId: this.value
      })
      // console.log(data, "批次库存");
      this.batchInventoryData = data
    },
    // 出库订单
    async getOutboundOrderList() {
      const { data } = await getOutboundOrderList({
        skuId: this.value
      })
      // console.log(data, "出库订单");
      this.outboundOrderData = data
    },
    // 详情 入库单
    async getOrderInfo() {
      const { data } = await getOrderInfo({
        skuId: this.value
      })
      // console.log(data, "入库单详情");
      this.receiptdOrderOrder = data.skuOrderInfoDTOList
    },
    // 详情 产品图片
    async getPictureList() {
      const { data } = await getPictureList({
        skuId: this.value
      })
      this.picUrl = data
      // console.log(data, "产品图片");
    },
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    },
    reset() {}
  }
}
</script>

<style></style>
